.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: transparent;

  .rangle-top {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-30%, -60%) rotate(60deg);
    width: 300px;
    height: 300px;
    background-color: #f3b7ad;
    border-radius: 50px;
    animation: rangleTop 16s ease-in-out infinite;
    -webkit-animation: rangleTop 16s ease-in-out infinite;
  }

  .rangle-left-one {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(20%, 70%) rotate(50deg);
    width: 300px;
    height: 300px;
    background-color: #93AEC1;
    border-radius: 100px;
    animation: rangleLeftOne 16s ease-in-out infinite;
    -webkit-animation: rangleLeftOne 16s ease-in-out infinite;

  }

  .rangle-left-two {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-80%, 20%) rotate(-20deg);
    width: 150px;
    height: 150px;
    background-color: #ec6a52;
    border-radius: 50px;
    animation: rangleLeftTwo 16s ease-in-out infinite;
    -webkit-animation: rangleLeftTwo 16s ease-in-out infinite;
  }
}

@-webkit-keyframes rangleTop {
  0% {
    transform: translate(-30%, -60%) rotate(60deg);
  }
  25% {
    transform: translate(-40%, -60%) rotate(70deg);
  }
  50% {
    transform: translate(-40%, -50%) rotate(60deg);
  }
  75% {
    transform: translate(-30%, -50%) rotate(70deg);
  }
  100% {
    transform: translate(-30%, -60%) rotate(60deg);
  }
}

@keyframes rangleTop {
  0% {
    transform: translate(-30%, -60%) rotate(60deg);
  }
  25% {
    transform: translate(-40%, -60%) rotate(70deg);
  }
  50% {
    transform: translate(-40%, -50%) rotate(60deg);
  }
  75% {
    transform: translate(-30%, -50%) rotate(70deg);
  }
  100% {
    transform: translate(-30%, -60%) rotate(60deg);
  }
}

@keyframes rangleLeftOne {
  0% {
    transform: translate(20%, 70%) rotate(50deg);
  }
  25% {
    transform: translate(15%, 70%) rotate(60deg);
  }
  50% {
    transform: translate(15%, 60%) rotate(65deg);
  }
  75% {
    transform: translate(20%, 60%) rotate(60deg);
  }
  100% {
    transform: translate(20%, 70%) rotate(50deg);
  }
}

@-webkit-keyframes rangleLeftOne {
  0% {
    transform: translate(20%, 70%) rotate(50deg);
  }
  25% {
    transform: translate(15%, 70%) rotate(60deg);
  }
  50% {
    transform: translate(15%, 50%) rotate(65deg);
  }
  75% {
    transform: translate(20%, 50%) rotate(60deg);
  }
  100% {
    transform: translate(20%, 70%) rotate(50deg);
  }
}

@keyframes rangleLeftTwo {
  0% {
    transform: translate(-80%, 20%) rotate(-20deg);
  }
  25% {
    transform: translate(-80%, 10%) rotate(-30deg);
  }
  50% {
    transform: translate(-90%, 10%) rotate(-35deg);
  }
  75% {
    transform: translate(-90%, 20%) rotate(-30deg);
  }
  100% {
    transform: translate(-80%, 20%) rotate(-20deg);
  }
}


@-webkit-keyframes rangleLeftTwo {
  0% {
    transform: translate(-80%, 20%) rotate(-20deg);
  }
  25% {
    transform: translate(-80%, 10%) rotate(-30deg);
  }
  50% {
    transform: translate(-90%, 10%) rotate(-35deg);
  }
  75% {
    transform: translate(-90%, 20%) rotate(-30deg);
  }
  100% {
    transform: translate(-80%, 20%) rotate(-20deg);
  }
}